<template lang="pug">
.card(:class="{ 'card-active' : isActive }" @click="changeActive")
  .card-title {{title}}
  .card-item
    .card-item-label 收货人：
    .card-item-bd
      el-input(size="mini" v-model="address.consignee")
  .card-item
    .card-item-label 收货电话：
    .card-item-bd
      el-input(size="mini" v-model="address.mobile")
  .card-item.card-item-start
    .card-item-label 收货地址：
    .card-item-bd
      .card-item-bd-select
        el-select(size="mini" placeholder="请选择" v-model="address.province_id" @change="changeProvince")
          el-option(
            v-for="item in provinceOptions"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          )
        el-select(size="mini" placeholder="--" v-model="address.city_id" @change="changeCity")
          el-option(
            v-for="item in cityOptions"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          )
        el-select(size="mini" placeholder="--" v-model="address.district_id")
          el-option(
            v-for="item in districtOptions"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          )
      .card-item-bd-input
        el-input(size="mini" v-model="address.address")
</template>

<script>
import { getRegion } from 'api'
export default {
  name: 'addressCard',
  props: {
    title: {
      default: '自定义',
      type: String
    },
    isActive: {
      default: false,
      type: Boolean
    }
  },
  data () {
    return {
      address: {
        consignee: '',
        mobile: '',
        province_id: '',
        city_id: '',
        district_id: '',
        address: ''
      },
      provinceOptions: [],
      cityOptions: [],
      districtOptions: []
    }
  },
  watch: {
    address: {
      handler (value) {
        this.$emit('changeAddress', value)
      },
      deep: true
    }
  },
  methods: {
    changeActive () {
      this.$emit('changeActive')
    },
    // 获取行政区域
    async getRegion ({ id = 0, type}) {
      try {
        const { data } = await this.$axios.get(getRegion, { params: { pid: id } })
        this[type] = data
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    },
    changeProvince (value) {
      this.cityOptions = []
      this.address.city_id = ''
      this.address.district_id = ''
      this.districtOptions = []
      this.getRegion({ id: value, type: 'cityOptions' })
    },
    changeCity (value) {
      this.districtOptions = []
      this.address.district_id = ''
      this.getRegion({ id: value, type: 'districtOptions' })
    }
  },
  created () {
    this.getRegion({ type: 'provinceOptions' })
  }
}
</script>

<style scoped lang="scss">
.card {
  width: 360px;
  height: 209px;
  padding: 20px;
  background: #FFFFFF;
  cursor: pointer;
  &.card-active {
    background: #EFEFEF;
  }
  .card-title {
    font-size: 12px;
    color: #0f73e6;
  }
  .card-item {
    display: flex;
    align-items: center;
    margin-top: 10px;
    &.card-item-start {
      align-items: flex-start;
    }
    .card-item-label {
      min-width: 60px;
      width: 60px;
      font-size: 12px;
      color: #666666;
      text-align: right;
    }
    .card-item-bd {
      flex: 1;
    }
  }
  .card-item-bd-select {
    .el-select {
      width: 80px;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .card-item-bd-input {
    margin-top: 10px;
  }
}
</style>
